iframe
Förkortningar
- FIF - Friendly iFrames
- XSS - Cross-site scripting
Programmeringsspråk
Tagg i HTML
iframe
Attribut i HTML
allowfullscreenallowtransparencysrcsrcdocloading
Ändra höjd på iframe med Javascript
frameElement.style.height = '320px';
<iframe src="foods.php" name="test_frame"></iframe>
window.onload = function() {
alert(window.frames["test_frame"].document.body.innerHTML);
}
Den iframe som koden laddas in i Javascript
frameElement
Alternativ
top.document.querySelector("iframe")
Centrera det element ovanför iframe från iframe
frameElement.parentNode.style.margin = '0 auto'
Getting the source code of an iframe
document.getElementById('iframeID').contentDocument.body.innerHTML
document.getElementById('iframeID').contentWindow.document.body.innerHTML
What's the best way to reload / refresh an iframe using JavaScript?
document.getElementById('some_frame_id').contentWindow.location.reload();
Javascript
Post data (child iframe)
var jsonMessage = {first: 'lorem', last : 'ipsum'};
window.parent.postMessage(JSON.stringify(jsonMessage), '*');
Get data (parent iframe)
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if (event.origin == "http://example.com:8080") {
jsonMessage = JSON.parse(event.data);
}
}
Skrolling av iframe
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
Länkar
Externa länkar
- Mozilla.org Developer Iframe Scripting
- Css-tricks.com Forums Topic iframe scrolling problems in iOS iPhone 5-6
- David Walsh.name Scroll iframes iOS
- http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/
- http://stackoverflow.com/questions/1301540/set-variable-in-parent-window-from-iframe
- http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript
- http://stackoverflow.com/questions/6138617/writing-from-iframe-to-the-outside-web-page
- http://stackoverflow.com/questions/5604839/accessing-an-element-outside-of-iframe
- https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Kuriosa
Escape for srcdoc
$0.innerHTML.replace(/"/g, '"')
Liknande
- Frames
